<template>
    <!--综合管廊统计-->
    <div class="right_pipe_gallery">
        <div class="pipe_gallery">
            <div>管廊总数</div>
            <div class="progress">
                <div>
                    <p
                        :style="{
                            width: (13399 / 20000) * 100 + '%'
                        }"
                    ></p>
                    <span class="process_surplus">
                        <span>18899m</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="pipe_gallery_echarts">
            <chart-view
                :chart-option="EchartsMethods.pipegalleryStatistics()"
                :auto-resize="true"
                height="100%"
            ></chart-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { EchartsMethods } from '@/chart/index';
</script>

<style scoped lang="scss">
.right_pipe_gallery {
    height: 90%;
    .pipe_gallery {
        margin-top: 8px;
        display: flex;
        align-items: center;
        > div {
            &:nth-of-type(1) {
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #ffffff;
                margin-right: 8px;
            }
            &:nth-of-type(2) {
                width: 264px;
                height: 20px;
                padding: 1px;
                border: 1px solid #91ffdf;
                background: rgba(3, 33, 58, 0.8);
                position: relative;
                overflow: hidden;
                flex: 1;
                > div {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    position: absolute;
                    left: 0;
                    top: 0;

                    > span {
                        display: block;
                        height: 17px;
                        line-height: 17px;
                        flex: 1;
                        text-align: center;
                        z-index: 2;
                        text-align: right;
                        padding-right: 10px;
                        > span {
                            color: #ffffff;
                            font-size: 14px;
                            text-shadow: 0 0 10px rgb(92, 249, 204), 0 0 20px rgb(92, 249, 204),
                                0 0 30px rgb(92, 249, 204), 0 0 40px rgb(92, 249, 204); //设置发光效果
                        }
                    }

                    p {
                        &:nth-child(1) {
                            background: linear-gradient(90deg, #0068dc 0%, #00e3c0 100%);
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        height: 20px;
                        line-height: 20px;
                        width: auto;
                    }
                }
            }
        }
    }
    .pipe_gallery_echarts {
        margin-top: 8px;
        height: 75%;
        div {
            height: 100%;
        }
    }
}
</style>
